<template>
	<view class="container"
		:style="{'background-image':data.explain[0].backgroundImage,'background-size': '100%' + data.explain[0].height + '%'}">
		<!-- 自定义导航栏 transparent-->
		<view class="content" v-if="data.explain.length>0">
			<template v-for="(item,index) in data.explain" :key="index">
				<view v-if="item.type == 'info'">
					<uni-nav-bar v-if="item.title" :backgroundColor="item.backgroundColor" :title="item.title"
						:border="false" :fixed="true" @scroll="scrollEvent" :statusBar="true" :color="item.titleColor">
					</uni-nav-bar>
					<view v-else style="height: 10px;"></view>
				</view>
				<!-- 头部 -->
				<view class="header" v-if="item.type=='head'">
					<view class="set">
						<view @click="$goURl('/pages/personal/set/index')">
							<uni-icons class="ll_icon " color="#fff" type="gear" size="25"></uni-icons>
						</view>
						<view @click="saoma()">
							<uni-icons class="ll_icon " color="#fff" type="scan" size="25"></uni-icons>
						</view>
					</view>
					<view class="info" @click="$goURl('/pages/personal/set/userinfo')">
						<view style="display: flex;">
							<view class="left">
								<image :src="userInfo.head?userInfo.head:$defaultAvatar" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="top">
									<view class="name">{{userInfo.nickname?userInfo.nickname:userInfo.mobile}}</view>
								</view>
								<view class="dec">
									<view class="invite" @click.stop="copy(userInfo.user_id)">
										邀请码:{{userInfo.user_id}}
									</view>
								</view>
								<view class="dec" v-if='userInfo.cp > 0'>
									<view class="invite" @click.stop="copy(userInfo.uid)">
										激活码:{{userInfo.uid}}
									</view>
								</view>
							</view>
						</view>
						<view class="sign" @click.stop="$goURl('/pages/personal/signIn/signIn')">签到</view>
					</view>

					<view class="list">
						<view class="item" v-for="(item,index) in toplists" @click="$goURl(item.link)"
							v-show="item.isShow">
							<view class="num">
								{{index==0?data.subscript.favorites:''}}
								{{index==1?data.subscript.follow:''}}
								{{index==2?data.subscript.footprint:''}}
							</view>
							<view class="title">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="headerBottom">

					</view>
				</view>
				<!-- 消费券 -->
				<view class="order" v-if="item.type=='balance'">
					<view class="list">
						<view class="item" v-for="(item,index) in balancelists"
							:style="{width: 1/balancelists.filter(item=>{ return item.isShow }).length*100+'%'} "
							:key="index" @click="$goURl(item.link)" v-show="item.isShow">
							<!-- <image class="imgs" v-if="item.url" :src="item.url" mode="aspectFill"></image> -->
							<view class="text texts">
								{{ formatNumber([userInfo.money,userInfo.zkfc,userInfo.zk,userInfo.fc,userInfo.dl][index])}}
							</view>
							<view class="text texts">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 订单 -->
				<view class="order" v-if="item.type=='order'">
					<view class="title">
						我的订单<view class="titles" @click="$goURl('/pages/order/order?state=0')">查看全部>></view>
					</view>
					<view class="listbox" v-if="data.subscriptShow">
						<view class="list" v-for="(item,index) in orderlist"
							:style="{width: 1/orderlist.length*100+'%'}" @click="$goURl(item.link)"
							v-show="item.isShow">
							<uni-badge v-if="item.state!==-1" class="item" :text="item.state" absolute="rightTop"
								size="small">
								<image :src="item.url" mode="aspectFit"></image>
								<view class="text">
									{{item.name}}
								</view>
							</uni-badge>
							<view class="item" v-else>
								<image :src="item.url" mode="aspectFit"></image>
								<view class="text">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="orderBottom" v-show="data.threeShow>0">
						<view class="item" v-for="(item,index) in threeorder" :key="index" @click="$goURl(item.link	)"
							v-show="item.isShow">
							<image :src="item.url	" mode=""></image>
							{{item.name}}
						</view>

					</view>
				</view>
				<!-- 主要工具 -->
				<view class="order" v-if="item.type=='businessTool'">
					<view class="title">
						主要工具
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in orderlists"
							:style="{width: 1/orderlists.filter(item=>{ return item.isShow }).length*100+'%'} "
							:key="index" @click="clickitems(index,item.link)" v-show="item.isShow">
							<image class="imgs" :src="item.url" mode="aspectFill"></image>
							<view class="text texts">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 其他工具 -->
				<view class="order" v-if="item.type=='otherTool'">
					<view class="title" @click="scanCode">
						其他工具
					</view>
					<view class="listss">
						<view class="item" v-for="item in orderlistsss" @click="$goURl(item.link)" v-show="item.isShow">
							<view class="left">
								<image :src="item.url" mode=""></image>
								{{item.name}}
							</view>
							<uni-icons type="forward" size="22"></uni-icons>
						</view>
					</view>
				</view>
			</template>
		</view>
		<uni-popup ref="saomaref" type="bottom" border-radius="10px 10px 0 0">
			<view class="box">
				<view class="cen1" @click="saomatwo()">扫码</view>
				<view class="cen2" @click="imgUp()">相册</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import * as qrcode from "../../static/js/reqrcode.js"
	import personal from "../../static/js/personal.json"
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onPageScroll
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let data = reactive({
		subscript: {},
		subscriptShow: false,
		explain: [],
		threeShow: 3,
		backgroundColor: "transparent"
	})
	let saomaref = ref()
	let userInfo = ref({})
	let orderlist = reactive([])
	let orderlists = ref([])
	let balancelists = ref([])
	let toplists = reactive([])
	let orderlistsss = reactive([])
	let threeorder = reactive([])
	onLoad((option) => {
		personal.forEach(item => {
			if (item.type == 'otherTool') {
				orderlistsss = item.data
			}
			if (item.type == 'order') {
				orderlist = item.data
				threeorder = item.data2
				// data.threeShow=item.data2.filter(item=>item.isShow==true	)
			}
			if (item.type == 'head') {
				toplists = item.data
			}
			if (item.type == 'businessTool') {
				orderlists.value = item.data
			}
			if (item.type == 'balance') {
				balancelists.value = item.data
			}
		})
	})
	onPageScroll((e) => {
		if (e.scrollTop > 50) {
			data.backgroundColor = '#fff'
		} else {
			data.backgroundColor = 'transparent'
		}
	})
	onShow(() => {
		init()
		uni.$on('scanCode', (info) => { //开启监听全局的地址改变事件
			console.log(info, "info")
			let user = uni.getStorageSync('userInfo')
			if (user.uid) {
				let str = info.split('#')[1]
				uni.navigateTo({
					url: str
				})
			} else {
				let str = info.split('#')[1]
				uni.setStorageSync('paymenturl', str)
				uni.navigateTo({
					url: info
				})
			}
			// uni.$off('scanCode');
			// const urlObj = new URL(info);
			// // 使用URLSearchParams解析查询参数
			// const params = new URLSearchParams(urlObj.search);
			// // 获取storecode的值
			// const storecode = params.get('storecode');
			// setTimeout(() => {
			// 	uni.navigateTo({
			// 		url: `/pages/Lochig/pizzahut/selectDrink?id=${storecode}`
			// 	})
			// }, 200)
		})

	})
	onPullDownRefresh(() => {

		init()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	//钱包
	function formatNumber(num) {
		if (Number.isInteger(num)) {
			return num;
		} else {
			return num.toFixed(2);
		}
	}

	function getExplain() {
		proxy.$request({
			url: `api/decoration/?code=1`,
			method: 'get',
			success(res) {
				console.log(res, "decoration")
				if (res.errno == 0 && res.data.explain != "") {
					data.explain = JSON.parse(res.data.explain)
					if (data.explain[0].backgroundImage) {
						data.explain[0].backgroundImage = "url('" + data.explain[0].backgroundImage + "')"
					}
					data.explain.forEach(item => {
						if (item.type == 'otherTool') {
							orderlistsss = item.data
						}
						if (item.type == 'order') {
							orderlist = item.data
							threeorder = item.data2
							// data.threeShow=item.data2.filter(item=>{
							// 	return item.isShow
							// })
						}
						if (item.type == 'head') {
							toplists = item.data
						}
						if (item.type == 'businessTool') {
							orderlists.value = item.data
						}
						if (item.type == 'balance') {
							balancelists.value = item.data

						}
					})
					applyBusinesss()
				}
			}

		})
	}
	// 扫码
	function scan() {
		// #ifdef APP-PLUS
		uni.scanCode({
			success: function(res) {
				let dats = ''
				dats = res.result.split('=')
				proxy.$goURl(res.result)
			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title: '扫码失败'
				})
			}
		});
		// #endif

		// #ifdef H5
		if (origin.indexOf('https') === -1) {
			imgUp()
		} else {
			uni.navigateTo({
				url: "/pages/ScanCode/ScanCode"
			})
		}

		// #endif

	}

	function clickitems(i, url) {
		if (orderlists.value.length == 4 && i == 2) {
			getBusinessToken(url)
		} else if (orderlists.value.length == 4 && i == 3) {
			scan()
		} else if (orderlists.value.length == 3 && i == 2) {
			scan()
		} else {
			proxy.$goURl(url)
		}
	}

	function getBusinessToken(url) { //获取商家token
		proxy.$request({
			url: `api/getBusinessToken/`,
			method: 'get',
			success(res) {
				if (res.errno == 0) {
					uni.setStorageSync('businessToken', res.data.businessToken)
					setTimeout(() => {
						uni.navigateTo({
							url: url
						})
					}, 500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})

				}

			}
		})
	}

	function imgUps() {
		uni.chooseImage({
			sizeType: ['original'],
			count: 1,
			success: function(res) {
				const tempFilePaths = res.tempFilePaths
				qrcode.qrcode.decode(tempFilePaths[0]);
				qrcode.qrcode.callback = function(img) {
					if (img == "error decoding QR Code") {
						uni.showToast({
							title: "识别二维码失败，请重新上传！",
							duration: 2000,
							icon: 'none'
						})
					} else {
						console.log(img, "img")
						// let dats = img.split('=')
						// proxy.$goURl(img)
					}
				}
			}
		});
	}

	function init() {
		proxy.$userInfo({
			success(res) {
				userInfo.value = res.data
				console.log("userinfo", userInfo.value)
				getExplain()
				proxy.$request({
					url: `api/subscript/`,
					method: 'get',
					success(res) {
						if (res.errno == 0) {
							data.subscript = res.data
							data.subscriptShow = true
							let orderlists = orderlist
							for (let var1 in res.data.order) {
								if (orderlists[var1] != undefined) {
									if (orderlists[var1].state == orderlists[var1].state) {
										orderlist[var1].state = res.data.order[Number(var1)]
									}
								}
							}
						}
					}
				})
			}
		})
	}

	function scrollEvent(e) {

	}

	function copy(data) {
		uni.setClipboardData({
			data: data,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				})
			}
		});
	}

	function scanCode() {
		uni.navigateTo({
			url: "/pages/ScanCode/ScanCode"
		})
	}

	function applyBusinesss() { //获取审核结果
		proxy.$request({
			url: `api/applyBusiness/`,
			method: 'put',
			success(res) {
				console.log(res, "res")
				if (res.errno == 0) {
					if (res.data.state == 3 || res.data.state == 1) {
						orderlistsss.forEach((it) => {
							if (it.name == '商家管理') {
								it.link = "/pages/business/MerchantManagement"
								it.name = "商家管理"
							}
						})



					} else {

						orderlistsss.forEach((it) => {
							if (it.name == '商家管理') {
								it.link = "/pages/business/Txapplyfor"
								it.name = "商家申请"
								it.isShow = true
							}
						})
					}
				} else {
					orderlistsss.forEach((it) => {
						if (it.name == '商家管理') {
							it.link = "/pages/business/Txapplyfor"
							it.name = "商家申请"
							it.isShow = true
						}
					})
				}


			}
		})
	}

	function saoma() {
		saomaref.value.open()
		// #ifdef H5
		// if (origin.indexOf('https') === -1) {
		// 	imgUp()
		// } else {
		// 	uni.navigateTo({
		// 		url: '/pages/ScanCode/ScanCode'
		// 	})
		// }
		// #endif

	}

	function saomatwo() {
		saomaref.value.close()
		uni.navigateTo({
			url: '/pages/ScanCode/ScanCode'
		})
	}

	function imgUp() {
		saomaref.value.close()
		uni.chooseImage({
			sizeType: ['original'],
			sourceType: ['album'], //从相册选择
			count: 1,
			success: function(res) {
				console.log(res, "res")
				const tempFilePaths = res.tempFilePaths
				qrcode.qrcode.decode(tempFilePaths[0]);
				qrcode.qrcode.callback = function(img) {
					console.log(img, "imgimg")
					if (img == "error decoding QR Code") {
						uni.showToast({
							title: "识别二维码失败，请重新上传！",
							duration: 2000,
							icon: 'none'
						})
					} else {
						console.log('img', img)
						let user = uni.getStorageSync('userInfo')
						if (user.uid) {
							let str = img.split('#')[1]
							uni.navigateTo({
								url: str
							})
						} else {
							let str = img.split('#')[1]
							uni.setStorageSync('paymenturl', str)
							uni.navigateTo({
								url: img
							})
						}
						// let dats = img.split('=')
						// appContext.config.globalProperties.$goURl('/pages/business/pay?id=' + dats[0] + '&discount=' + dats[
						// 	1] + '&notes=' + dats[2] + '&money=' + dats[3])
					}
				}
			}
		});
	}
</script>
<style lang="scss" scoped>
	.container {
		// background-image: url('https://pili-vod.guanxikeji.com/moban/img/1719974455248.png');
		background-repeat: no-repeat;
		background-size: 100% 100vh;

		.content {
			.set {
				display: flex;
				justify-content: flex-end;
				padding: 20rpx 10rpx 20rpx 100rpx;

				.ll_icon {
					margin-right: 42rpx;

				}
			}

			.header {
				// background-color: #FFF;
				padding: 30upx;
				color: #FFF;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						margin-right: 20upx;

						image {
							width: 120upx;
							height: 120upx;
							border-radius: 50%;
							// border: 1upx solid #000;
						}
					}

					.right {
						.top {
							.name {
								color: #fff;
								font-size: 40upx;
								font-weight: bold;
								width: 280upx;
								white-space: nowrap;
								/* 禁止换行 */
								overflow: hidden;
								/* 超出部分隐藏 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}
						}

						.dec {
							display: flex;
							margin-top: 20upx;

							.invite {
								color: $color4;
								font-size: 22upx;
								padding: 5upx 20upx;
								background-color: #fff;
								border-radius: 20upx;
							}
						}
					}

					.sign {
						margin-right: 30rpx;
						font-size: 14px;
						background-color: #fff;
						padding: 10rpx 20rpx;
						border-radius: 20px;
						color: $color4;
					}
				}

				.list {
					display: flex;
					margin-top: 30upx;

					.item {
						width: 33%;
						text-align: center;

						.num {
							color: #fff;
							font-size: 40upx;
							font-weight: bold;
						}

						.title {
							color: #f5f5f5;
							font-size: 22upx;
						}
					}
				}

				.listbox {
					display: flex;
					justify-content: space-between;
					margin-top: 30upx;

					.itembox {
						width: 45%;
						color: #707070;
						border: 1upx solid #707070;
						border-radius: 20upx;
						height: 140upx;
						text-align: center;
						line-height: 140upx;
					}
				}
			}

			.order {
				margin: 20upx;
				background-color: #FFF;
				border-radius: 20upx;
				padding: 20upx 0;
				// box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

				.title {
					font-weight: bold;
					color: #333333;
					margin: 20upx;
					display: flex;
					justify-content: space-between;

					.titles {
						font-size: 12px;
						color: #999;
						font-weight: 300upx;
					}
				}

				.listbox {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.list {
					display: flex;
					margin: 20upx;
					align-items: center;
					justify-content: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 64rpx;
							height: 64rpx;
							margin-bottom: 30upx;
						}

						.imgs {
							width: 80upx;
							height: 80upx;
						}

						.text {
							color: #666666;
							font-size: 24upx;
						}

						.texts {
							color: #333;
							font-size: 28upx;
							font-weight: bold;
						}
					}
				}

				.lists {
					display: flex;
					padding: 20upx;
					border-top: 1upx solid #F5F5F5;
					justify-content: space-between;

					.items {
						display: flex;
						align-items: center;
						background-color: #F6F6F6;
						border-radius: 40upx;
						padding: 10upx 20upx;

						image {
							width: 40upx;
							height: 40upx;
							margin-right: 10upx;
						}

						.texts {
							color: #666666;
							font-size: 24upx;
						}
					}
				}

				.listss {
					padding: 20upx;
					border-top: 1upx solid #F5F5F5;

					.item {
						display: flex;
						justify-content: space-between;
						padding: 30upx 0;

						.left {
							font-size: 28upx;
							color: #333;
							// font-weight: bold;
							display: flex;
							align-items: center;

							image {
								width: 44upx;
								height: 44upx;
								margin-right: 20upx;
							}
						}
					}
				}

				.orderBottom {
					display: flex;
					justify-content: space-around;
					border-top: 1px solid #F5F5F5;
					padding-top: 10px;

					.item {
						width: 30%;
						display: flex;
						align-items: center;
						background-color: #F6F6F6;
						border-radius: 15px;
						font-size: 14px;
						font-weight: 700;
						color: #333333;
						justify-content: center;
						padding: 5px 0;

						image {
							width: 22px;
							height: 22px;
							margin-right: 5px;
						}
					}
				}
			}
		}
	}

	.box {
		background-color: #fff;
		padding: 50rpx 0rpx;
		border-radius: 10rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 100rpx;

		.cen1 {
			width: 90%;
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #ccc;
		}

		.cen2 {
			width: 90%;
			display: flex;
			justify-content: center;
			padding-top: 20rpx;

		}
	}
</style>
